<template>
<div class="record">
    <div class="kong"  v-if="historyList.length==0">
        <img src="../../static/nodata.png" alt="">
        <p>这里什么都没有</p>
    </div>
    <div v-else>
    <div class="main">
        <navigator class="hm"
        url="/pages/Detail_Vido/index"
        open-type="navigate"
         v-for="(item,index) in historyList" :key="index" >
        <dl>
            <radio-group v-if="flag==true" >
                <radio color="#fd7aa6" :checked="item.badgepay" :data-index="index" @tap="changeCheck"/>
            </radio-group>
            <dt><img :src="item.pic" alt=""></dt>
            <dd>{{item.title}}</dd>
          </dl>
        </navigator>
    </div>
    <div class="footer">
          <span v-if="flag==false" @click="changeFlagTrue()">编辑</span>
          <div v-else-if="flag==true" class="footer_true">
              <p><radio color="#fd7aa6" :checked="checkAll"  @tap="changeCheckAll" />全选</p>
              <span @click="changeFlagFalse()">取消</span>
              <button @click="del">删除</button>
          </div>
    </div>
    </div>
 </div>  
</template>

<script>
import data from "./../../static/historyList.json";
export default {
data(){
    return{
      historyList:data.data.result.video,
      flag:false,
      checkAll:false,
      checkOne:false
    }
  },
      //进页面改变数据状态
      onShow(){
       this.historyList.map(item=>{
           item.badgepay=false;
       })
      },
  methods:{
      //全选--删除--取消
      changeFlagTrue(){
          this.flag=true
      },
      //编辑
      changeFlagFalse(){
          this.flag=false
      },
      //反选
      changeCheck(e){
          let dataList=this.historyList;
          let thisIndex=e.currentTarget.dataset.index;
          dataList.forEach((item,index)=>{
              if(thisIndex==index){
                  item.badgepay=!item.badgepay
              }
          })
       this.checkAll= dataList.every((item)=>{
              return item.badgepay
          })
      },
      //全选
      changeCheckAll(e){
          this.checkAll=!this.checkAll;
           let dataList=this.historyList;
          dataList.forEach((item)=>{
            item.badgepay=this.checkAll
          })
      },
      //删除
      del(){
       this.historyList= this.historyList.filter(item=>{
           return item.badgepay==false;
        })
      }
  }
}
</script>

<style lang="scss" scoped>
 .record{
     width: 100%;
     height: 100%;
     .kong{
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content:center;
         color: #888;
     }
     
     .main{
         width: 100%;
         flex: 1;
         overflow-y: auto;
         .hm{
         dl{
             width: 100%;
             height: 250rpx;
             display: flex;
             align-items: center;
             border-bottom: 1px solid #ddd;
             dt{
            width: 300rpx;
            height:200rpx;
            border-radius: 10rpx;
            margin-left: 20rpx;
            img{
              width: 100%;
              height: 100%;
            border-radius: 10rpx;
            }
          }
            dd{
              width: 100%;
              font-size: 28rpx;
              border-bottom: 1px solid #ddd;
              white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
            }
         }
         }
     }
     .footer{
         width: 100%;
         height: 120rpx;
         position: fixed;
         bottom: 0;
         left: 0;
         background: #fff;
         line-height: 120rpx;
        span{
            margin-left: 350rpx;
            font-size: 40rpx;
        }
        .footer_true{
            width: 100%;
            height: 100%;
            display: flex;
            button{
                border: none;
                outline: none;
                line-height: 120rpx;
            }
        }
     }
 }
</style>